<template>
  <button
    class="text-sm text-center rounded duration-150 flex justify-center items-center"
    :class="[
      typeEnum[props.type],
      sizeEnum[isIconButton].button,
      { 'active::scale-105': isActiveaAnimated }
    ]"
    @click.stop="onButtonClick"
  >
    <!-- loading -->
    <m-svg-icon
      v-if="props.loading"
      name="loading"
      class="w-2 h-2 animate-spin mr-1"
    />

    <!-- icon 按钮 -->
    <m-svg-icon
      v-if="props.icon"
      :name="props.icon"
      class="m-auto"
      :class="sizeEnum[isIconButton].icon"
      :color="props.iconColor"
      :fillClass="props.iconClass"
    />

    <!-- 文字按钮  -->
    <slot />
  </button>
</template>
<script>
const EMITS_CLICK = 'click'

// 设置type可选项
const typeEnum = {
  primary:
    'text-white bg-zinc-800 dark:bg-zinc-900 hover:bg-zinc-900 dark:hover:bg-zinc-700 active:bg-zinc-800 dark:active:bg-zinc-700',
  main: 'text-white bg-main dark:bg-zinc-900 hover:bg-hover-main dark:hover:bg-zinc-700 active:bg-main dark:active:bg-zinc-700',
  info: 'text-zinc-800 dark:text-zinc-300 bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 active:bg-zinc-200 dark:active:bg-zinc-700'
}

// 设置size 可选项
const sizeEnum = {
  // 文字按钮
  default: {
    button: 'w-8 h-4 text-base',
    icon: ''
  },
  'icon-default': {
    button: 'w-4 h-4',
    icon: 'w-1.5 h-1.5'
  },
  small: {
    button: 'w-7 h-3 text-base',
    icon: ''
  },
  'icon-small': {
    button: 'w-3 h-3',
    icon: 'w-1.5 h-1.5'
  }
}
</script>
<script setup>
import { computed } from 'vue'
import mSvgIcon from '../svg-icon/index.vue'
const emits = defineEmits([EMITS_CLICK])
const props = defineProps({
  // 图标名称
  icon: String,
  // 图标颜色
  iconColor: String,
  // 图标类名
  iconClass: String,
  // 按钮类型
  type: {
    type: String,
    default: () => 'main',
    validator(value) {
      if (!Object.keys(typeEnum).includes(value)) {
        throw new Error(`type必须是${Object.keys(typeEnum)}中的一个`)
      } else {
        return true
      }
    }
  },
  // 按钮大小
  size: {
    type: String,
    default: () => 'default',
    validator(value) {
      if (!Object.keys(sizeEnum).includes(value)) {
        throw new Error(`size必须是${Object.keys(sizeEnum)}中的一个`)
      } else {
        return true
      }
    }
  },
  // 点击是否需要动画
  isActiveaAnimated: {
    type: Boolean,
    default: true
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  }
})

// 区分是否是文字按钮和icon按钮 如果传了icon则默认为icon按钮
const isIconButton = computed(() => {
  return props.icon ? 'icon-' + props.size : props.size
})
// 处理点击事件
const onButtonClick = () => {
  if (props.loading) return
  emits(EMITS_CLICK)
}
</script>

<style scoped lang="scss"></style>
